import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import type { ThemeOptions } from '../types/editor';

export const useThemeStore = defineStore('theme', () => {
  // 状态
  const currentTheme = ref('light');
  const themes = ref<Record<string, ThemeOptions>>({
    light: {
      name: 'light',
      styles: {
        backgroundColor: '#ffffff',
        textColor: '#333333',
        borderColor: '#e0e0e0',
        toolbarBg: '#f5f5f5',
        activeColor: '#1890ff',
        hoverColor: '#40a9ff',
      }
    },
    dark: {
      name: 'dark',
      styles: {
        backgroundColor: '#1e1e1e',
        textColor: '#e0e0e0',
        borderColor: '#333333',
        toolbarBg: '#252525',
        activeColor: '#1890ff',
        hoverColor: '#40a9ff',
      }
    }
  });
  
  // Getters
  const currentThemeConfig = computed(() => themes.value[currentTheme.value]);
  const themeList = computed(() => Object.keys(themes.value));
  
  // Actions
  function setTheme(themeName: string) {
    if (themes.value[themeName]) {
      currentTheme.value = themeName;
    }
  }
  
  function registerTheme(theme: ThemeOptions) {
    if (theme.name && theme.styles) {
      themes.value[theme.name] = theme;
    }
  }
  
  function toggleTheme() {
    currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light';
  }
  
  return {
    currentTheme,
    themes,
    currentThemeConfig,
    themeList,
    setTheme,
    registerTheme,
    toggleTheme
  };
});